<template>
  <w-panel-wrap class="width100">
    <!-- 标题 -->
    <w-panel-title :title="tmpl.transName">
      <div v-if="!readonly">
        <div class="operation">
          <span class="edit" @click="editCarriageTmpl()">修改</span>
          <span class="delete" @click="deleteCarriageTmpl()">删除</span>
        </div>
        <!-- 显示默认 -->
        <span class="default-car" v-if="tmpl.isDefault == 1">默认</span>
      </div>
    </w-panel-title>
    <!-- 内容 -->
    <table class="table" width="100%">

      <thead>
        <!-- 按件计费 第一个运费是首重运费，第二个运费是续重运费 -->
        <tr v-if="tmpl.transType == 1">
          <th>运送方式</th>
          <th width="60%">运送到</th>
          <th>首重（KG）</th>
          <th>运费（元）</th>
          <th>续重（KG）</th>
          <th>运费（元）</th>
        </tr>
        <!-- 按重计费 第一个运费是首重运费，第二个运费是续重运费 -->
        <tr v-if="tmpl.transType == 0">
          <th>运送方式</th>
          <th width="60%">运送到</th>
          <th>首件（个）</th>
          <th>运费（元）</th>
          <th>续件（个）</th>
          <th>运费（元）</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(tmp, index) in transList" :key="index">
          <td>{{transName}}</td>
          <td>{{tmp.city_name}}</td>
          <td v-if="tmpl.transType == 0">
            {{tmp.trans_weight}}
          </td>
          <td v-if="tmpl.transType == 1">
            {{Number(tmp.trans_weight).toFixed(1)}}
          </td>
          <td class="cr">
            {{Number(tmp.trans_fee).toFixed(2)}}
          </td>
          <td v-if="tmpl.transType == 0">
            {{tmp.trans_add_weight}}
          </td>
          <td v-if="tmpl.transType == 1">
            {{Number(tmp.trans_add_weight).toFixed(1)}}
          </td>
          <td class="cr">
            {{Number(tmp.trans_add_fee).toFixed(2)}}
          </td>
        </tr>
      </tbody>

    </table>
  </w-panel-wrap>
</template>

<script>
// 获取所有的地址信息
import { apiCarriage } from '../../common/api.js'
import { mapGetters } from 'vuex'
// 吐司弹框
import app from '../../main'

// 导入缓存区域
import { session } from 'js/util'

export default {
  props: {
    /**
     * 当前模板类型
     *
     * 1: 按件计费
     * 2: 按重计费
     */
    type: {
      type: Number,
      default: 1
    },
    tmpl: {
      type: Object,
      default: () => { return {} }
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tmpls: []
    }
  },
  mounted() {
    // 如果模板存在
    if (this.tmpl) {
      // 赋值
      this.tmpls = this.tmpl

      // 如果当前是EMS消息
      if (this.tmpls.transEmsInfo && typeof this.tmpl.transEmsInfo == 'string') {
        this.tmpls.transEmsInfo = JSON.parse(this.tmpl.transEmsInfo)
      }

      // 如果当前是快递消息
      if (this.tmpls.transExpressInfo && typeof this.tmpl.transExpressInfo == 'string') {
        this.tmpls.transExpressInfo = JSON.parse(this.tmpl.transExpressInfo)
      }

      // 如果当前是平邮消息
      if (this.tmpls.transMailInfo && typeof this.tmpl.transMailInfo == 'string') {
        this.tmpls.transMailInfo = JSON.parse(this.tmpl.transMailInfo)
      }
    }
  },
  updated() {
    // 如果模板存在
    if (this.tmpl) {
      // 赋值
      this.tmpls = this.tmpl

      // 如果当前是EMS消息
      if (this.tmpls.transEmsInfo && typeof this.tmpl.transEmsInfo == 'string') {
        this.tmpls.transEmsInfo = JSON.parse(this.tmpl.transEmsInfo)
      }

      // 如果当前是快递消息
      if (this.tmpls.transExpressInfo && typeof this.tmpl.transExpressInfo == 'string') {
        this.tmpls.transExpressInfo = JSON.parse(this.tmpl.transExpressInfo)
      }

      // 如果当前是平邮消息
      if (this.tmpls.transMailInfo && typeof this.tmpl.transMailInfo == 'string') {
        this.tmpls.transMailInfo = JSON.parse(this.tmpl.transMailInfo)
      }
    }
  },
  computed: {
    ...mapGetters(['token']),
    // 获取名称
    transName() {
      if (this.tmpl.transEms == 1) {
        return 'EMS'
      }
      if (this.tmpl.transExpress == 1) {
        return '快递'
      }
      if (this.tmpl.transMail == 1) {
        return '平邮'
      }
      return ''
    },
    // 获取列表
    transList() {
      if (this.tmpls.transEmsInfo) {
        return this.tmpls.transEmsInfo
      }

      // 如果当前是快递消息
      if (this.tmpls.transExpressInfo) {
        return this.tmpls.transExpressInfo
      }

      // 如果当前是平邮消息
      if (this.tmpls.transMailInfo) {
        return this.tmpls.transMailInfo
      }
      return []
    }
  },
  methods: {
    /**
     * 跳转到编辑运费模板页面
     */
    editCarriageTmpl() {
      // 将模板信息保存到缓存中
      session.set('carriageTmpl', this.tmpls)

      // 跳转页面
      this.$router.push({path: `/carriage/edit/${this.tmpl.id}`})
    },

    /**
     * 将入参格式化成JSON
     *
     * @params { Object } list 当前操作的模板信息
     */
    parseJSON(list) {
      // 如果当前是EMS消息
      if (list.transEmsInfo) {
        return JSON.parse(list.transEmsInfo)
      }

      // 如果当前是快递消息
      if (list.transExpressInfo) {
        return JSON.parse(list.transExpressInfo)
      }

      // 如果当前是平邮消息
      if (list.transMailInfo) {
        return JSON.parse(list.transMailInfo)
      }
      return {}
    },

    /**
     * 删除运费模板
     */
    deleteCarriageTmpl() {
      this.$modal({
        title: '删除',
        content: '是否删除此条运费模板',
        onConfirm: () => {
          apiCarriage.deleteTransport(this.tmpl.id, this.token).then((data) => {
            if (data == '370') return
            app.$toast('删除模板成功')
            this.$emit('delete', this.tmpl.id)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.default-car {
  color: $color-dark
}
.width100 {
  width: 100% !important;
}
.operation {
  color: #F20685;
  float: right;
  right: 106px;
  position: absolute;
  .edit {
    cursor: pointer;
    margin-right: 18px;
  }

  .delete {
    cursor: pointer;
    // margin-right: 70px;
  }
}

.cr {
  color: #F20685;
}

.table {
  // border: 0px;

  thead {
    th {
      background-color: #FFFFFF;
      border-right: 1px solid #E0E0E0;
      border-top: 0px;

      &:last-child {
        border-right: 0px solid #E0E0E0;
      }
    }
  }

  tbody {
    tr {
      td {
        border-right: 1px solid #E0E0E0;
        max-width: 500px;
        overflow: hidden;

        &:last-child {
          border-right: 0px;
        }
      }

      &:last-child {
        td {
          border-bottom: 0px;
        }
      }
    }
  }
}
</style>